<template>
	<view class='main_box'>
		<!-- LOGIN字样 -->
		<view class="title">
			LOGIN
		</view>
		<!-- 登录表单 -->
		<view class='login_box'>
			<uni-forms ref="loginRef" :rules="rules" :model="loginForm">
				<uni-forms-item name="username">
					<uni-easyinput v-model="loginForm.username" placeholder="请输入账户" @blur="validateField('username')" />
				</uni-forms-item>
				<view style="height: 30px;"></view>
				<uni-forms-item name="password">
					<uni-easyinput v-model="loginForm.password" placeholder="请输入密码" @blur="validateField('password')" />
				</uni-forms-item>
				<view style="height: 30px;"></view>
			</uni-forms>
			<button type="default" class="custom_button" @click="clickLogin">登 录</button>
		</view>
		<!-- 没有账号，点击注册 -->
		<view class="register-section">
			没有账号？
			<text style="color: #55aa00" @click="register">
				点击注册
			</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 登录输入的表单
				loginForm: {
					username: "",
					password: ""
				},
				// 登录表单校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: "账号不能为空",
							pattern: /^.{12,12}$/, // 在正则表达式前后加上斜杠 '/'
							trigger: "blur" // 表示失去焦点时触发校验
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: "密码不能为空",
							pattern: /^[a-zA-Z]\w{4,17}$/, // 在正则表达式前后加上斜杠 '/'
							trigger: "blur" // 表示失去焦点时触发校验
						}]
					}
				}
			};
		},
		methods: {
			// 点击登录
			clickLogin() {
				// 校验请求参数，发送请求
				this.$refs.loginRef.validate().then(res => {
					// 表单校验通过，执行登录逻辑
					console.log("登录成功！");
					     // 然后跳转到带有选项卡的页面
					     uni.switchTab({
					       url: './user',
					     });
				}).catch(err => {
					// 表单校验未通过，输出错误信息
					console.log("表单错误信息：", err);
				});
			},
			// 手动触发指定字段的校验
			validateField(fieldName) {
				this.$refs.loginRef.validateField(fieldName);
			},
			register(){
				uni.navigateTo({
					url: './register',
				});
			},
		}
	};
</script>
<style scoped lang="scss">
	/*页面主体内容*/
	.main_box {
		height: 100vh;
		width: 100vw;
		background: url(../../static/background.jpg);
		background-size: cover;
	}
	.title {
		font-size: 140upx;
		color: aquamarine;
		position: relative;
		top: 250upx;
		text-align: center;
	}
	/*登录表单*/
	.login_box {
		position: relative;
		top: 450upx;
		margin: 0 40upx;
	}
	.custom_button {
		background-color: #55aa00;
		color: #ffffff;
		width: 100%;
		border-radius: 40px;
	}
	/*没有账号注册*/
	.register-section {
		position: absolute;
		font-size: 35upx;
		bottom: 0upx;
		width: 100%;
		color: #505050;
		text-align: center;
	}
</style>